<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar @onSearch="onSearch" />
    <el-button type="primary" style="margin:15px 0;">新增商品</el-button>
    <!-- @biubiu='fn' -->
  <!-- 搜索栏 -->
    <!-- 表单列表 -->
    <el-table :data="cates" row-key="id" style="width: 100%">
      <!-- 分类名 -->
      <el-table-column prop="company" label="分类名" />
      <!-- 分类图标 -->
      <el-table-column prop="cateIcon" label="分类图标">
        <template #default="{ row }">
          <div>
            <img :src="row.cateIcon" width="50" alt="">
          </div>
        </template>
      </el-table-column>
      <!-- 是否启用 -->
      <el-table-column prop="enable" label="是否启用">
        <template #default="{ row }">
          <div>
            <el-switch v-model="row.enable" inline-prompt active-text="启用" inactive-text="未启用"
              @change="switchEnable(row.id, row.enable)" ></el-switch>
          </div>
        </template>
      </el-table-column>
      <!-- 操作列表 -->
      <el-table-column prop="enable" label="操作">
        <el-button type="primary">编辑</el-button>
        <el-button type="danger">编辑</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fetchCates } from '@a/cateLists'
import SearchBar from '@c/SearchBar.vue';
export default {
  name: 'CateLists',
  data () {
    return {
      cates: [],
      searchParams: {//搜索就是把这三个参数的值绑定给表单
        key: '', // 搜索关键字
        start: '', // 开始日期
        end: ''// 结束日期
    },
  }
  },
methods: {
    onSearch(searchParams){
      console.log(searchParams)
      this.searchParams=searchParams
      this.fetchCates (this.searchParams) 
    },
    switchEnable (id, enable) {
      // 行内修改商品分类选中状态     发请求修改
      console.log(id, enable)
    },
    fetchCates () {
      fetchCates({
        ...this.searchParams// 展开的话 后面还可以请求其他的参数 所以把之前的timeRange去掉了
      }).then(res => {
        // 打印测试后台数据
        console.log(res)
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
      })
    }
  },
  created () {
    this.fetchCates()
  },
  components:{
    SearchBar
  }}
</script>

<style lang="scss" scoped></style>
